<template>
  <div
    class="px-[5px] pt-[10px] text-right"
    v-if="props.showCheckText && changeInfo.processInstanceId"
  >
    <el-link type="primary" @click="checkHistoryModalVisible = true">审核记录</el-link>
  </div>
  <!-- 基本信息 -->
  <div class="bg-white mt-[10px]">
    <BaseHead style="border-bottom: 0">基本信息</BaseHead>
    <BaseTable>
      <tr>
        <td class="td-name">项目名称</td>
        <td>{{ changeInfo.projectName }}</td>
        <td class="td-name">负责人名称</td>
        <td>{{ changeInfo.chargerName }}</td>
      </tr>
      <tr>
        <td class="td-name">所属单位</td>
        <td>
          <CommonTreeLabel
            :value="changeInfo.unitId"
            valueKey="codeColumn"
            labelKey="valueColumn"
            :dataList="unitList"
          />
        </td>
        <td class="td-name">变更时间</td>
        <td>{{ changeInfo.alterDate }}</td>
      </tr>
      <tr>
        <td class="td-name">变更证明材料</td>
        <td colspan="3">
          <p v-for="item in fileList" :key="item.id" class="my-[5px]">
            {{ item.name }}
            <el-link type="primary" @click="handleDownload(item.id, item.name)" class="ml-[5px]"
              >下载</el-link
            >
          </p>
        </td>
      </tr>
      <tr>
        <td class="td-name">变更原因</td>
        <td colspan="3">{{ changeInfo.alterReason }}</td>
      </tr>
    </BaseTable>
  </div>
  <!-- 展示的变更模块根据变更类型决定 -->
  <!-- 预算明细变更 -->
  <div
    class="bg-white my-[10px]"
    v-if="!loading && changeInfo.alterType?.indexOf('liuxiaoBudget') != -1"
  >
    <BaseHead style="border-bottom: 0">预算变更明细（单位：万元）</BaseHead>
    <el-table
      :data="detailData.budgetAlterationList"
      class="w-full"
      border
      stripe
      row-key="id"
      default-expand-all
      :tree-props="{ hasChildren: 'hasChild' }"
    >
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column prop="name" label="预算科目" />
      <el-table-column label="留校预算" align="center">
        <el-table-column prop="beforeAlterBudgetFee" label="变更前" />
        <el-table-column label="变更量">
          <template #default="{ row }">
            <span
              :style="{
                color:
                  Number(row.budgetFeeChange) > 0
                    ? 'red'
                    : Number(row.budgetFeeChange) < 0
                    ? 'blue'
                    : '',
              }"
              >{{ row.budgetFeeChange }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="afterAlterBudgetFee" label="变更后">
          <template #default="{ row }">
            <span
              :style="{
                color:
                  Number(row.afterAlterBudgetFee) > Number(row.beforeAlterBudgetFee)
                    ? 'red'
                    : Number(row.afterAlterBudgetFee) < Number(row.beforeAlterBudgetFee)
                    ? 'blue'
                    : '',
              }"
              >{{ row.afterAlterBudgetFee }}</span
            >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
  <!-- 成员信息-->
  <div class="bg-white my-[10px]" v-if="!loading && changeInfo.alterType?.indexOf('member') != -1">
    <BaseHead style="border-bottom: 0">成员变更</BaseHead>
    <el-table :data="detailData.memberAlterationsList" class="w-full" border>
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="成员类型">
        <template #default="{ row }">
          <CommonLabel :value="row.memberType" :dataList="memberTypeList" />
        </template>
      </el-table-column>
      <el-table-column prop="personName" label="姓名" />
      <el-table-column prop="unitName" label="工作单位" />
      <el-table-column label="职称">
        <template #default="{ row }">
          <CommonTreeLabel :value="row.titleId" :dataList="applierTitleList" />
        </template>
      </el-table-column>
      <el-table-column label="学位">
        <template #default="{ row }">
          <CommonLabel :value="row.eduDegreeId" :dataList="degreeList" />
        </template>
      </el-table-column>
      <el-table-column label="项目角色">
        <template #default="{ row }">
          <CommonLabel :value="row.bearTypeId" :dataList="cdTypeList" />
        </template>
      </el-table-column>
      <el-table-column label="成员状态">
        <template #default="{ row }">
          <CommonLabel :value="row.joinStateId" :dataList="memberStatusList" />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--项目委托 -->
  <div
    class="bg-white my-[10px]"
    v-if="!loading && changeInfo.alterType?.indexOf('mandatary') != -1"
  >
    <BaseHead style="border-bottom: 0">项目委托</BaseHead>
    <BaseTable>
      <tr>
        <td class="td-name">被委托人</td>
        <td style="width: 87.5%">{{ changeInfo.mandataryname }}</td>
      </tr>
      <tr>
        <td class="td-name">委托开始日期</td>
        <td>{{ changeInfo.mandatarybegindate }}</td>
      </tr>
      <tr>
        <td class="td-name">委托结束日期</td>
        <td>{{ changeInfo.mandataryenddate }}</td>
      </tr>
    </BaseTable>
  </div>
  <!-- 延期变更 -->
  <div class="bg-white" v-if="!loading && changeInfo.alterType?.indexOf('delayFinish') != -1">
    <BaseHead style="border-bottom: 0">延期变更</BaseHead>
    <BaseTable>
      <tr>
        <td class="td-name">延期结项至</td>
        <td style="width: 87.5%">{{ changeInfo.changePlanEndDate }}</td>
      </tr>
    </BaseTable>
  </div>
  <!-- 中止变更 -->
  <div class="bg-white" v-if="!loading && changeInfo.alterType?.indexOf('middleStop') != -1">
    <BaseHead style="border-bottom: 0">中止变更</BaseHead>
    <BaseTable>
      <tr>
        <td class="td-name">变更后项目状态</td>
        <td style="width: 87.5%">暂停</td>
      </tr>
    </BaseTable>
  </div>
  <CheckHistoryModal
    v-model="checkHistoryModalVisible"
    :procInsId="changeInfo.processInstanceId"
    :checker="changeInfo.checker"
    :checkDate="changeInfo.checkdate"
  />
</template>

<script setup>
import CheckHistoryModal from "@/views/project/components/CheckHistoryModal.vue";
import BaseHead from "@/views/project/components/BaseHead.vue";
import BaseTable from "@/views/project/components/BaseTable.vue";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import CommonTreeLabel from "@/views/project/components/CommonTreeLabel.vue";
import { recordsDetail } from "@/api/project/zx/xmbg";
import useCommonFetch from "@/hooks/useCommonFetch";
import { handleDownload } from "@/utils/main";
const unitList = useCommonFetch("成果归属单位");
const memberTypeList = useCommonFetch("成员类型");
const applierTitleList = useCommonFetch("职称");
const degreeList = useCommonFetch("学位");
const cdTypeList = useCommonFetch("项目-承担角色");
const memberStatusList = useCommonFetch("项目-参与状态");
const props = defineProps({
  operateId: String,
  showCheckText: {
    type: Boolean,
    default: false, //默认不显示审核记录文字
  },
});
const checkHistoryModalVisible = ref(false);
const detailData = ref({});
const changeInfo = ref({}); //变更信息
const fileList = ref([]);
const loading = ref(true);
//获取变更信息
const getDetail = async () => {
  try {
    const res = await recordsDetail(props.operateId);
    detailData.value = res.data;
    changeInfo.value = res.data.bizProjectAlteration;
    if (changeInfo.value.alterFileId) {
      fileList.value.push({
        name: changeInfo.value.fileName,
        id: changeInfo.value.alterFileId,
      });
    }
    loading.value = false;
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="scss"></style>
